<!-- 自定义底部 -->
<template>
  <div class="footer">
    <div v-for="(item, index) of items" :key="index" @click="clickItem(item,index)">
      <img :src="index===idx?item.selectIcon:item.icon"/>
      <span :style="index===idx?{color:'#f4ea2a'}:{color:'#cdcdcd'}">{{item.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items:Array
  },
  data() {
    return {
       idx :0
    };
  },
  methods: {
    clickItem(item, index){
      this.$router.push(item.path);
      this.idx = index
    }
  }
};
</script>

<style  scoped>
     .footer{
         display: flex;
         justify-content: space-around;
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
         background-color:white;
     }
     div{
         padding: 5px;
     }
     div img{
         width: 60px;
         height: 60px;
     }
     div span{
         display: block;
         text-align: center;
         font-size: 20px;
         color: #cdcdcd;
     }
</style>
